<template>
  <div class="payback-wrapper">
    <div class="main-hd">
      <h2>{{$t('m.huíkuǎnliúshuǐ')}}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <div class="search-con">
          <div class="items">
            <div class="label">{{$t('m.qǐngxuǎnzétíjiāorìqí')}}</div>
            <DatePicker type="daterange" v-model="repayDate" format="yyyy-MM-dd" :placeholder="$t('m.qǐngxuǎnzétíjiāorìqí')" class="search-col" :options="optionsPicker" @on-change="handleRepayPicker"></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{$t('m.qǐngxuǎnzéhuánkuǎnrìqí')}}</div>
            <DatePicker type="daterange" v-model="selectDate" format="yyyy-MM-dd" :placeholder="$t('m.qǐngxuǎnzéhuánkuǎnrìqí')" class="search-col" :options="optionsPicker" @on-change="handleDatePicker"></DatePicker>
          </div>
          <div class="items">
            <div class="label">{{$t('m.dìngdānbiānhào')}}</div>
            <Input :placeholder="$t('m.dìngdānbiānhào')" class="search-col" v-model="RMorderGid" />
          </div>
          <div class="items">
            <div class="label">{{$t('m.numPay')}}</div>
            <Input :placeholder="$t('m.numPay')" class="search-col" v-model="RMorderRepayGid" />
          </div>
          <div class="items">
            <div class="label">{{$t('m.huánkuǎnlèixíng')}}</div>
            <Select class="search-col" :placeholder="$t('m.huánkuǎnlèixíng')" v-model="RMpayChannelName">
              <Option value="">{{$t('m.entire')}}</Option>
              <Option value="1">{{$t('m.xiànshàng')}}</Option>x</Option>
              <Option value="0">{{$t('m.xiànxià')}}</Option>
            </Select>
          </div>
          <div style="margin:20px 0;">
            <Button class="parameter_button" style="margin-right:30px;" @click="recycleQuery">{{$t('m.recycle')}}</Button>
            <Button class="parameter_button" type="primary" @click="returnMoneyQuery">{{$t('m.cháxún')}}</Button>

            <Button type="primary" @click="exportData" style="float: right; margin: 4px;">
              <Icon type="ios-download-outline"></Icon> {{$t('m.dǎochūshùjù')}}
            </Button>
          </div>

        </div>
        <div>
          <h4 class="table_title">{{$t('m.huíkuǎnliúshuǐhuìzǒng')}}</h4>
          <Table style="margin-bottom: 24px;" ref="totalTable" border :data="RMcollectData" :columns="RMcollectTable">
          </Table>
        </div>
        <div>
          <h4 class="table_title">{{$t('m.huíkuǎnliúshuǐmíngxì')}}</h4>
          <Table ref="payTable" border :data="RMdetailData" :columns="RMdetailTable" :loading="RMdetailLoading"></Table>

          <Page :total="RMdetailDataSize" :current.sync="RMpageNumber" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange">
            <slot>
              <span class="total-money">{{$t('m.shíshōuzǒngé')}}：{{ RMcollectData[0].repaidAmountTotal }}元</span>
              <span>共{{ RMdetailDataSize }}条</span>
            </slot>
          </Page>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTreeMount } from "@/libs/util";
import excel from '@/static/excel'
import {
  repayTypeObject,
  repayChannel
} from '@/static/constant';
import {
  dateFormat
} from '@/static/tools';
export default {
  name: 'returnMoney',
  data () {
    return {

      RMpageNumber: 1,
      RMpageSize: 10,
      RMrepayTimeBegin: '',
      RMrepayTimeEnd: '',
      RMsubmitTimeBegin: '',
      RMsubmitTimeEnd: '',
      RMorderGid: '',
      RMorderRepayGid: '',
      RMpayChannelName: '',
      RMcollectTable: [{
        title: this.$t('m.zǒngshíshōujīné'),
        key: 'repaidAmountTotal',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.repaidAmountTotal));
        }
      },
      {
        title: this.$t('m.zǒngyīngshōuběnjīn'),
        key: 'loanAmountTotal',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.loanAmountTotal));
        }
      },
      {
        title: this.$t('m.zǒngshíshōuběnjīn'),
        key: 'receiveLoanAmount',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveLoanAmount));
        }
      },
      {
        title: this.$t('m.zǒngkǎntóuxī'),
        key: 'receiveServiceFeeTotal',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveServiceFeeTotal));
        }
      },
      {
        title: this.$t('m.zǒnglìxí'),
        key: 'receiveInterestTotal',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveInterestTotal));
        }
      },
      {
        title: this.$t('m.zǒngfáxī'),
        key: 'receiveInterestFineTotal',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveInterestFineTotal));
        }
      }
      ],
      RMdetailTable: [{
        title: this.$t('m.tíjiāoshíjiān'),
        key: 'ctime',
        align: 'center'
      },
      {
        title: this.$t('m.repayTime'),
        key: 'repayTime',
        align: 'center',
      },
      {
        title: this.$t('m.dìngdānbiānhào'),
        key: 'orderGid',
        align: 'center'
      },
      {
        title: this.$t('m.numPay'),
        key: 'orderRepayGid',
        align: 'center'
      },
      {
        title: this.$t('m.shíshōuzǒngé'),
        key: 'repayAmount',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.repayAmount));
        }
      },
      {
        title: this.$t('m.yīngshōuběnjīn'),
        key: 'loanAmount',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.loanAmount));
        }
      },
      {
        title: this.$t('m.shíshōuběnjīn'),
        key: 'receiveLoanAmount',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveLoanAmount));
        }
      },
      {
        title: this.$t('m.kǎntóuxī'),
        key: 'receiveServiceFee',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveServiceFee));
        }
      },
      {
        title: this.$t('m.moneyrate'),
        key: 'receiveInterest',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveInterest));
        }
      },
      {
        title: this.$t('m.penaltyRate'),
        key: 'receiveInterestFine',
        align: 'center',
        render: (h, param) => {
          return h("div", formatTreeMount(param.row.receiveInterestFine));
        }
      },
      {
        title: this.$t('m.huánkuǎnlèixíng'),
        key: 'payChannelName',
        align: 'center',
      }
      ],
      RMcollectData: [{}],
      RMdetailData: [],
      RMdetailDataSize: 1,
      RMdetailLoading: true,
      selectDate: '',
      repayDate: '',
      defaultTimes: '',


      optionsPicker: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
    }
  },
  created () {
    this.RMdefaultTime()
    this.RMsubmitTimeBegin = this.defaultTimes
    this.RMsubmitTimeEnd = this.defaultTimes
    this.returnMoneyQuery();
  },
  methods: {
    // 重置
    recycleQuery () {
      this.RMdefaultTime()
      this.RMorderGid = ''
      this.RMorderRepayGid = ''
      this.RMpayChannelName = ''
      this.RMsubmitTimeBegin = this.defaultTimes
      this.RMsubmitTimeEnd = this.defaultTimes
      this.RMrepayTimeBegin = ''
      this.RMrepayTimeEnd = ''
      this.returnMoneyQuery()

    },
    // 获取数据
    returnMoneyQuery () {
      this.RMdetailLoading = true
      let param = {},
        query = '';
      param.pageNumber = this.RMpageNumber,
        param.pageSize = this.RMpageSize,
        param.repayTimeBegin = this.RMrepayTimeBegin,
        param.repayTimeEnd = this.RMrepayTimeEnd,
        param.submitTimeBegin = this.RMsubmitTimeBegin
      param.submitTimeEnd = this.RMsubmitTimeEnd
      param.orderGid = this.RMorderGid
      param.orderRepayGid = this.RMorderRepayGid
      param.payChannelName = this.RMpayChannelName
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/finance/in-out/repay?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.RMcollectData = [res.body.result]
          this.RMdetailData = res.body.result.orderStatisticsVOs.records
          this.RMdetailData.forEach((e) => {
            e.payChannelName == 0 ? e.payChannelName = this.$t('m.xiànxià') : e.payChannelName = this.$t('m.xiànshàng')
          });
          this.RMdetailDataSize = res.body.result.orderStatisticsVOs.total
          setTimeout(() => {
            this.RMdetailLoading = false
          }, 500);
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },

    RMdefaultTime () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.defaultTimes = `${y}-${m}-${r}`; // es6 字符串模板
      // this.billStatisticsTimeDefault =[`${y}-${m}-${r}`,`${y}-${m}-${r}`]
    },
    //选择还款日期change事件
    handleDatePicker (e) {
      if (!e[0]) {
        if (this.RMrepayTimeBegin == '') {
          this.RMsubmitTimeBegin = this.defaultTimes
          this.RMsubmitTimeEnd = this.defaultTimes
        } else {
          if (this.RMsubmitTimeBegin == this.defaultTimes && this.RMsubmitTimeEnd == this.defaultTimes) {
            this.RMrepayTimeBegin = ''
            this.RMrepayTimeEnd = ''
          } else {
            this.RMsubmitTimeBegin = this.defaultTimes
            this.RMsubmitTimeEnd = this.defaultTimes
            this.RMrepayTimeBegin = ''
            this.RMrepayTimeEnd = ''
          }
        }
      } else {
        if (this.RMsubmitTimeBegin == this.defaultTimes && this.RMsubmitTimeEnd == this.defaultTimes) {
          this.RMrepayTimeBegin = e[0]
          this.RMrepayTimeEnd = e[1]
          this.RMsubmitTimeEnd = ''
          this.RMsubmitTimeBegin = ''
        } else {
          this.RMrepayTimeBegin = e[0]
          this.RMrepayTimeEnd = e[1]
        }
      }
    },
    // 选择提交日期change事件
    handleRepayPicker (e) {
      if (!e[0]) {
        if (this.RMrepayTimeBegin == '') {
          this.RMsubmitTimeBegin = this.defaultTimes
          this.RMsubmitTimeEnd = this.defaultTimes
        } else {
          this.RMsubmitTimeBegin = ""
          this.RMsubmitTimeEnd = ""
        }
      } else {
        if (this.RMrepayTimeBegin == this.defaultTimes && this.RMrepayTimeEnd == this.defaultTimes) {
          this.RMsubmitTimeBegin = e[0]
          this.RMsubmitTimeEnd = e[1]
          this.RMrepayTimeBegin = ''
          this.RMrepayTimeEnd = ''
        } else {
          this.RMsubmitTimeBegin = e[0]
          this.RMsubmitTimeEnd = e[1]
        }
      }
    },
    //页码改变的回调，返回改变后的页码
    handleCurrentChange (val) {
      this.page = val;
      this.returnMoneyQuery();
    },
    //切换每页条数时的回调，返回切换后的每页条数
    handleSizeChange (val) {
      this.pageSize = val;
      this.returnMoneyQuery();
    },
    // 导出用户数据汇总Excel
    exportData (type) {
      if (this.RMdetailData.length) {
        const params = {
          title: [
            this.$t('m.tíjiāoshíjiān'),
            this.$t('m.repayTime'),
            this.$t('m.dìngdānbiānhào'),
            this.$t('m.numPay'),
            this.$t('m.shíshōuzǒngé'),
            this.$t('m.yīngshōuběnjīn'),
            this.$t('m.shíshōuběnjīn'),
            this.$t('m.kǎntóuxī'),
            this.$t('m.moneyrate'),
            this.$t('m.penaltyRate'),
            this.$t('m.huánkuǎnlèixíng'),
          ],
          key: [
            'ctime',
            'repayTime',
            'orderGid',
            'orderRepayGid',
            'repayAmount',
            'loanAmount',
            'receiveLoanAmount',
            'receiveServiceFee',
            'receiveInterest',
            'receiveInterestFine',
            'payChannelName',
          ],
          data: this.RMdetailData,
          autoWidth: true,
          filename: this.$t('m.huíkuǎnliúshuǐmíngxì')
        }

        let RMexcel = this.RMcollectData
        RMexcel[0].ctime = this.RMsubmitTimeBegin + '~' + this.RMsubmitTimeEnd
        RMexcel[0].repayTime = this.RMrepayTimeBegin + '~' + this.RMrepayTimeEnd
        const paramsSum = {
          title: [
            this.$t('m.tíjiāoshíjiān'),
            this.$t('m.repayTime'),
            this.$t('m.zǒngshíshōujīné'),
            this.$t('m.zǒngyīngshōuběnjīn'),
            this.$t('m.zǒngshíshōuběnjīn'),
            this.$t('m.zǒngkǎntóuxī'),
            this.$t('m.zǒnglìxí'),
            this.$t('m.zǒngfáxī'),
          ],
          key: [
            'ctime',
            'repayTime',
            'repaidAmountTotal',
            'loanAmountTotal',
            'receiveLoanAmount',
            'receiveServiceFeeTotal',
            'receiveInterestTotal',
            'receiveInterestFineTotal',
          ],
          data: RMexcel,
          autoWidth: true,
          filename: this.$t('m.huíkuǎnliúshuǐhuìzǒng')
        }
        excel.export_array_to_excel(paramsSum)
        excel.export_array_to_excel(params)

      } else {
        this.$Message.info(this.$t('m.biǎogéshùjùbùnéngwéikōng'))
      }
    },
  },
  watch: {}
}
</script>

<style lang="scss">
@import "../../static/style.css";
@import "../../static/common.scss";
.items {
  display: inline-block;
  margin-right: 20px;
  width: 200px;
  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
.payback-wrapper {
  .ivu-table {
    width: 100%;
  }

  .search-con {
    margin-bottom: 10px;
    font-size: 0;

    .search-col {
      margin-right: 10px;
      margin: 5px;
      width: 200px;
      font-size: 14px;
      vertical-align: middle;
    }
  }

  .ivu-page {
    margin-top: 20px;
    text-align: right;

    .total-money {
      margin-right: 10px;
      padding-right: 10px;
      border-right: 1px solid #515a6e;
    }
  }
}

.table_title {
  color: #515a6e;
  margin-bottom: 10px;
}
</style>